<template>
  <div ref="strangeRef" class="barChart"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref, onBeforeUnmount } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { servicedatacount } from '/@/api/requestApi/boardApi';
  import echarts from '/@/utils/lib/echarts';
  defineProps({
    ...basicProps,
  });

  const strangeRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(strangeRef as Ref<HTMLDivElement>);
  const timer = ref('' || null);
  async function getServiceDataCount() {
    await servicedatacount().then((res) => {
      const chartsdata = {
        api_count: [],
        x_index: [],
      };
      chartsdata.api_count = res.data;
      chartsdata.x_index = res.x_index.map((item) => {
        return item + '点';
      });
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: '#11367a',
          textStyle: {
            color: '#6dd0e3',
            fontSize: 10,
          },
        },
        legend: {
          left: '11%',
          top: '15%',
          itemWidth: 7,
          itemHeight: 7,
          textStyle: {
            color: '#fff',
          },
        },
        grid: {
          top: '10%',
          bottom: '8%',
          left: '5%',
          right: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#1dc1fd',
                width: 0.5,
              },
            },
            axisTick: { show: false },
            axisLabel: {
              color: '#fff',
              fontSize: 10,
              interval: 0,
            },

            data: chartsdata.x_index,
          },
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            min: 0,
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: [6, 6],
              lineStyle: {
                color: '#122C49',
              },
            },
            axisLabel: {
              color: '#fff',
              showMaxLabel: false,
              fontSize: 10,
            },
            splitLine: {
              show: true,
              interval: 20,
              lineStyle: {
                type: 'dashed',
                color: '#25c6fe',
                width: 0.5,
                opacity: 0.4,
              },
            },
            name: '(数量)',
            nameGap: -5,
            nameTextStyle: {
              color: '#fff',
              fontSize: 9,
              align: 'right',
              padding: [0, 4, 0, 0],
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#77D6FF' },
                { offset: 0.5, color: '#629BCF' },
                { offset: 1, color: '#4F66A5' },
              ]),
            },
            barWidth: 16,
            barCategoryGap: 10,
            data: chartsdata.api_count,
          },
        ],
      });
    });
  }
  onMounted(() => {
    getServiceDataCount();
    timer.value = setInterval(() => {
      getServiceDataCount();
    }, 60000);
  });
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>

<style lang="less" scoped>
  .barChart {
    width: 100%;
    height: 100%;
  }
</style>
